<template>
  <el-card>
    <el-card>
      <div class="header-admin">
        <img
          width="80"
          src="https://img2.woyaogexing.com/2023/03/10/27228af7e527e757211597d010663fa4.jpeg"
          alt=""
        />
        欢迎来到YADMIN后台管理系统 ,
        <span style="color: #4fc1ff">{{ userInfo.username }}</span> 用户
      </div>
    </el-card>
    <el-carousel :interval="4000" type="card" height="400px">
      <el-carousel-item v-for="(item, index) in imgList" :key="index">
        <img :src="item" />
      </el-carousel-item>
    </el-carousel>
    <!-- <el-carousel :interval="4000" type="card" height="350px">
      <el-carousel-item v-for="(item, index) in slideList" :key="index">
        <div class="img-box">
          <img :src="item.img" />
        </div>
      </el-carousel-item>
    </el-carousel> -->
    <Map />
    <!-- <Chart />
    <Chart2 /> -->
    <!-- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

}
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 -->
    <!-- <div style="display: flex">
      <div style="flex: 0 1 40%">
        <div>
          <Chart3 :chartType="'line'" :chartData="[10, 20, 30, 10, 20, 20]" />
        </div>
        <div>
          <Chart3 :chartType="'line'" :chartData="[10, 20, 30, 10, 20, 20]" />
        </div>
        <div>
          <Chart3 :chartType="'line'" :chartData="[10, 20, 30, 10, 20, 20]" />
        </div>
      </div>
      <div style="flex: 0 1 60%"><Chart2 /></div>
    </div> -->
    <!-- <Chart4 height="300px" :option="chartOption"/> -->
  </el-card>
</template>

<script setup>
import * as echarts from "echarts";
import { ref } from "vue";
const userInfo = ref({});
const slideList = ref([]);
const chartOption = ref({});
import { api } from "@/api/index";
import Chart from "@/components/charts/chart.vue";
import Chart2 from "@/components/charts/chart2.vue";
import Chart3 from "@/components/charts/chart3.vue";
import Chart4 from "@/components/charts/chart4.vue";
import Map from "@/components/charts/map.vue";
const imgList = ref([
  "https://img2.woyaogexing.com/2023/03/08/b08c1deb64043c67edcea2f1062e58bb.jpeg",
  "https://img2.woyaogexing.com/2023/03/08/9f644bf021054dd37734880e895882a0.jpeg",
  "https://img2.woyaogexing.com/2023/03/08/53bb2dec7c6152933c7994226987b486.jpeg",
]);
const init = () => {
  userInfo.value = sessionStorage.getItem("userInfo")
    ? JSON.parse(sessionStorage.getItem("userInfo"))
    : {};
  // api("/carousel/show", "get", {}, {}).then((res) => {
  //   if (res.data.code == 200) {
  //     slideList.value = res.data.data;
  //   }
  // });
};
init();
</script>

<style scoped lang="scss">
.el-carousel {
  width: 1000px;
  margin: 20px auto;

  .img-box {
    // background: rgb(227, 226, 226);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      height: 100%;
    }
  }
}
.header-admin {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #333;
}

.header-admin img {
  margin-right: 20px;
  border-radius: 50%;
}

.el-carousel {
  width: 80%;
  margin: 30px auto;
}

.el-carousel img {
  width: 500px;
  height: 400px;
}
</style>